




let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]


//   将name的值渲染到a标签中,判断isnew值是否加粗
  let apibtn = document.querySelector('.apibtn')
  let fwb =document.querySelector('.fwb')
  let inputSpan = document.querySelector('.input span')
  let larr = ''
  let inputInput = document.querySelector('.input input')

  apiTypeData .forEach(function(v){
   
    larr += `<a href = '#' class='${v.isnew ? 'fwb' : ''} ' data-keyword=${v.keyword}>${v.name}</a>`
    apibtn.innerHTML = larr

  })



  apibtn.addEventListener('click',function(e){
        if(e.target.nodeName === "A"){
            inputSpan.textContent =e.target.textContent
            inputInput.placeholder=e.target.dataset.keyword
        }
  })

  tablecareSelect('.login-a span', '.mask-box div')


  let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

  




// 将div渲染到页面
  let apiBody = document.querySelector('.apibody')
  let mask = document.querySelector('.mask')

  let listbox = ''
  listDataArr.forEach(function(v){
    listbox +=`
        <div class='boxs'>
        <span class="apibody-text ${v.isSpecial ? 'ads': ''}">企业专用</span>
        <p><img src="../imgs/${v.img}" alt="" /></p>
        <p>${v.name}</p>
        <p class="${v.price ==='免费' ? 'f29' : 'fred'}">${v.price}</p>
        <button>申请数据</button>
      </div>
    `
    apiBody.innerHTML = listbox
  })


  

//   点击显示蒙层
  

  
let boxs = document.querySelectorAll('.boxs')

boxs.forEach(function(dom){
    dom.addEventListener('click',function(){
        location.href ='./Apidetails.html'
    })
})

let boxbtn =document. querySelectorAll('.boxs button')

boxbtn.forEach(function(v){
    v.addEventListener('click', function(e){
        e.stopPropagation()
        if (e.target.nodeName === 'BUTTON') {
            mask.style.display ='flex'
        }
    })
})

//点击登录框外关闭图层

mask.addEventListener('click',function(){
    mask.style.display ='none'
})

//阻止事件冒泡

let maskCenter = document.querySelector('.mask-center')

maskCenter.addEventListener('click', function(e){
    e.stopPropagation()
})


